<template>
  <div id="yydishes">
    <div class="table-container">
      <el-table
        ref="dishesTable"
        :data="formDataTable"
        style="width: 100%;"
        v-loading="listLoading"
        border
      >
        <el-table-column label="菜品类型" width="150" align="center">
          <template slot-scope="scope">{{scope.row.classifyId}}</template>
        </el-table-column>
        <el-table-column label="菜品名称" width="250" align="center">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="菜品销量" align="center">
          <template slot-scope="scope">{{scope.row.salesNumber}}</template>
        </el-table-column>
        <el-table-column label="菜品价格" width="160" align="center">
          <template slot-scope="scope">{{scope.row.price}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="pageNum"
        :page-size="pageSize"
        :pager-count="pageCount"
        @current-change="changePage"
        :current-page="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "yydishes",
  data() {
    return {
      listLoading: false, //是否加载动画
      //分页
      currentPage: 1, //当前页
      pageSize: 5, //显示多少条
      pageCount: 7 //页码最大显示多少数
    };
  },
  computed: {
    formDataTable() {
      let start = (this.currentPage - 1) * 5;
      let end = (this.currentPage - 1) * 5 + 5;
      return this.$store.state.bsStore.rankdishesData.slice(start, end);
    },
    pageNum() {
      return this.$store.state.bsStore.rankdishesData.length;
    }
  },
  methods: {
    ...mapActions(["getyinyeData"]),
    changePage(val) {
      this.currentPage = val;
    },
  }
};
</script>

<style scoped>
.operate-container {
  margin: 15px 0;
}
.el-input {
  width: 300px;
}
.block {
  margin-left: 50%;
}
</style>